<template>
    <div class="list">
        <div v-for="val of list" class="product"
             v-link="{'name':'product','params':{'sku_id':val._id,spu_id:val.spu_id||0}}">

            <img :src="val.pic+'?imageView2/1/w/200/h/200'">

            <div>
                <div class="thum-price">
                    <span v-if="val.price_cost" class="ui-price price-gray">{{val.price_cost/10}}</span>
                    <span class="ui-price price-red">{{val.price/10}}</span>
                </div>

                <div v-if="val.specs&&val.specs.length>0" class="specs">
                    <span v-for="specs of val.specs" class="spec">{{specs.spec_name}}:{{specs.specvalue_name}}</span>
                </div>

                <h1>
                    <b v-if="val.time_kill" class="seckill">秒杀</b>{{val.title}}
                </h1>

                <div v-if="val.state">
                    <div v-if="val.stock>0" class="tag-timer">
                        <span>{{val.time_kill | timeFormat 'h小时m分s后结束'}}</span>
                    </div>
                    <div v-if="val.stock==1&&val.time_kill>0" class="tag-last">
                        <span>最后一件</span>
                    </div>
                    <div v-if="val.stock==0" class="tag-sellout">
                        <span>秒杀结束</span>
                    </div>
                </div>
                <div v-else>
                    <div class="tag-timer">
                        <span>{{getSecKillDateStr(val)}}</span>
                    </div>
                </div>

                <div v-if="val.label&&val.length>0" class="tags">
                    <span v-for="label of val.label" class="tag">{{label}}</span>
                </div>
            </div>

        </div>
    </div>

    <div class="tips">
        {{canLoadMore?'正在加载更多':'没有更多产品'}}
    </div>

</template>

<script type="text/babel">
    import http from '../libs/http'
    import {dateFormat,timeFormat} from '../filters/dateFormat';

    var secKillTimer;
    export default{
        data(){
            return {
                list: []
            };
        },
        attached: function () {
            var self = this;

            http.get({
                url: api + 'seckill/list',
                jsonp: true
            }).then(function (obj) {
                if (obj.code == 0) {
                    self.list = obj.data || [];
                } else {
                    self.dispatch('toast', obj.msg);
                }

                if (secKillTimer)
                    clearInterval(secKillTimer);

                secKillTimer = setInterval(function () {
                    var isFinish = true;
                    self.list.forEach(function (secKill) {
                        if (secKill.time_kill > 0) {
                            secKill.time_kill -= 1000;
                            isFinish = false;
                        }
                    });
                    if (isFinish)
                        clearInterval(secKillTimer);
                }, 1000);

            }).catch(function () {
            })

        },
        methods: {

            getSecKillDateStr: function (secKill) {
                var nextD = new Date();
                nextD.setDate(nextD.getDate() + 1);
                nextD.setMinutes(0);
                nextD.setHours(0);
                nextD.setSeconds(0);

                var curr = Date.now();

                var startT = curr + secKill.time_kill;
                var isInCurrDay = startT < nextD.getTime();

                if (isInCurrDay) {
                    return timeFormat(secKill.time_kill, 'hh:mm:ss后开始');
                } else {
                    return dateFormat(startT, 'MM月dd日h点开始')
                }
            }
        }
    }
</script>

<style scoped>
    .product {
        width: 100%;
        height: 100px;
        padding: 8px 0;
        background: white;
        border-top: solid 1px #f0f0f0;
    }

    .product > img {
        margin-left: 8px;
        display: block;
        position: absolute;
        width: 100px;
        height: 100px;
    }

    .product > div {
        margin-right: 8px;
        margin-left: 116px;
    }

    .product h1 {
        font-size: 13px;
        width: 210px;
        font-weight: lighter;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .tag:first-child {
        padding: 2px;
        font-size: 10px;
        color: white;
        background: #ffba00;
    }

    .tag {
        padding: 2px;
        font-size: 10px;
        color: #888888;
        background: #eeeeee;
    }

    b.seckill {
        padding: 2px;
        font-size: 10px;
        color: white;
        background: red;
        display: inline-block;
        margin-right: 2px;
        font-weight: lighter;
    }

    .tag-timer::before {
        content: '';
        display: inline-block;
        width: 10px;
        height: 100%;
        background: url(../../static/img/ic_clock.png) no-repeat center;
        background-size: contain;
        margin: 0 2px;
        vertical-align: middle;
    }

    .tag-timer > span {
        vertical-align: middle;
    }

    .tag-timer, .tag-last, .tag-sellout {
        display: inline-block;
        font-size: 10px;
        height: 16px;
        padding: 0 4px 0 2px;
        color: white;
        background: rgba(0, 0, 0, 0.7);

    }

    .thum-price {
        position: absolute;
        text-align: right;
        right: 8px;
        margin-top: 80px;
    }

    .price-red {
        color: #ff0000;
        font-size: 14px;
        font-weight: normal;
    }

    .price-gray {
        color: #888888;
        text-decoration: line-through;
        font-size: 11px;
    }

    .tips {
        text-align: center;
        font-size: 12px;
        color: #888888;
        padding: 8px;
    }

    .specs {
        font-size: 10px;
        color: #888888;
        position: absolute;
        margin-top: 80px;
    }

    .spec {
        display: inline-block;
        padding: 2px;
    }
</style>